<template>
  <div class="base-info-wrapper">
    <custom-header-bar
      bg="1"
      title="查看资料"
      backStatus="1"
    ></custom-header-bar>
    <div class="content">
      <u--form
        class="form-wrapper"
        labelPosition="left"
        labelAlign="left"
        :labelStyle="labelStyle"
        labelWidth="180"
        :model="userInfo"
        ref="formUserInfo"
      >
        <u-form-item label="姓名：" prop="uphone" borderBottom ref="item1">
          <u--input
            placeholder="姓名"
            readonly
            v-model="userInfo.uname"
            border="none"
            style="background-color: none"
          ></u--input>
        </u-form-item>
        <u-form-item label="手机号码：" prop="card" borderBottom ref="item1">
          <u--input
            readonly
            placeholder="手机号码"
            v-model="userInfo.uphone"
            border="none"
          ></u--input>
        </u-form-item>
      </u--form>
      <div class="shengji-btn" @click.stop="handleClickUpgrade">升级用户</div>
    </div>
  </div>
</template>
<script>
import storage from "@/utils/storage";
import CustomHeaderBar from "@/components/custom-header-bar.vue";
export default {
  components: {
    CustomHeaderBar,
  },
  data() {
    return {
      userInfo: {},
      labelStyle: {
        fontSize: "28upx",
        color: "#000000D9",
      },
    };
  },
  created() {
    this.userInfo = storage.getUserInfo();
  },
  methods: {
    handleClickUpgrade() {
      uni.navigateTo({
        url: "/pages/moduleLogin/info/info?phone=" + this.userInfo.uphone,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.base-info-wrapper {
  height: 100%;
  padding: 24upx;
  padding-top: 180upx;
  box-sizing: border-box;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  .tabs-list {
    background-color: #ffffff;
  }

  .content-box {
    flex: 1;
    padding: 24upx;
    box-sizing: border-box;

    .inner-box {
      height: 100%;
      background-color: #ffffff;
      border-radius: 24upx;
      padding: 24upx 36upx;
      overflow-y: auto;

      .tag {
        margin: 40upx 0;
        position: relative;
        left: -36upx;
        width: 230upx;
        height: 64upx;
        line-height: 64upx;
        background: #defff8;
        border-radius: 0px 0px 16upx 0px;
        color: #33ccac;
        font-weight: bold;
        font-size: 32upx;
        text-align: center;
      }

      .image {
        height: 44upx;
      }

      .arrow {
        height: 18upx;
      }

      display: flex;
      flex-direction: column;

      .form-wrapper {
        flex: 1;
      }

      .button {
        width: 100%;
        height: 88upx;
        line-height: 88upx;
        background: #61d7ca;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        font-size: 34upx;
        color: #ffffff;
      }
    }
  }
}

.content {
  background-color: none;
}

.content {
  background-color: #fff;
  height: 100%;
  padding: 24upx;
  border-radius: 30upx;
}

.popup-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.success-tip {
  width: 416upx;
  box-sizing: border-box;
  padding: 40upx;
  text-align: center;

  .icon {
    width: 90upx;
    vertical-align: middle;
  }

  .title {
    margin-top: 15upx;
    font-size: 32upx;
  }

  .sub-title {
    margin-top: 24upx;
    font-size: 26upx;
    color: rgba(102, 102, 102, 1);
  }

  .button {
    margin-top: 48upx;
    width: 160upx;
    height: 60upx;
    line-height: 60upx;
    background: linear-gradient(
      -36deg,
      rgba(114, 215, 204, 0.8),
      rgba(40, 207, 179, 0.8)
    );
    border-radius: 4upx;
    color: #ffffff;
    font-size: 26upx;
    border-radius: 8upx;
  }

  .home {
    background: #ebedf0;
    color: #bfbebe;
  }
}
.shengji-btn {
  width: 620upx;
  height: 88upx;
  border-radius: 10upx;
  line-height: 88upx;
  text-align: center;
  color: #fff;
  font-size: 34upx;
  background-color: #61d7ca;
  margin: 0 auto;
  margin-top: 660upx;
}
</style>